<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幻灯片练习</title>
    <style>
        .content {
            width: 400px;
            height: 400px;
            border: 10px solid #aaaaaa;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }

        .content img {
            width: 400px;
            min-height: 400px;
        }

        #bottom, #top {
            width: 400px;
            height: 30px;
            font-size: 14px;
            color: white;
            line-height: 30px;
            text-align: center;
            position: absolute;
            left: 0;
            background-color: rgba(0, 0, 0, 0.9);
        }

        #top {
            top: 0;
        }

        #bottom {
            bottom: 0;
        }

        #left, #right {
            text-align: center;
            display: block;
            width: 30px;
            height: 30px;
            background-color: #000;
            color: white;
            border: 3px solid white;
            position: absolute;
            top: 180px;
            text-decoration: none;
            font-size: 16px;
            line-height: 30px;
            font-weight: bold;
            opacity: 0.4;
        }

        #left:hover, #right:hover {
            opacity: 0.9;
        }

        #left {
            left: 20px;
        }

        #right {
            right: 20px;
        }

        .kzq {
            width: 300px;
            margin: 20px auto;
            text-align: center;
            font-family: 微软雅黑;
            font-size: 14px;
        }

        .kzq a {
            text-decoration: none;
            background-color: #009bff;
            color: white;
            padding: 5px 10px;
        }

        .kzq a:hover {
            background-color: #0066cc;
        }

        .kzq a.active {
            background-color: #0066cc;
        }
    </style>
    <script>
        window.onload = function () {

            var oXh = document.getElementById("xh");
            var oBxh = document.getElementById("bxh");
            var oSm = document.getElementById("sm");


            var i = 3;
            var m = 0;

            oXh.onclick = function () {
                i = 3;
                m = 0;
                oSm.innerHTML = "当前状态为图片循环状态。";
                oXh.className = "active";
                oBxh.className = "";
            };

            oBxh.onclick = function () {
                i = 0;
                m = 3;
                oSm.innerHTML = "当前状态为图片不循环。";
                oXh.className = "";
                oBxh.className = "active";
            };


            var oTop = document.getElementById("top");
            var oBottom = document.getElementById("bottom");
            var oLeft = document.getElementById("left");
            var oRight = document.getElementById("right");

            var oImg = document.getElementById("img1");


            var arrImg = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"];
            var arrText = ["白发美女", "运动员", "蝴蝶仙子", "国风美女"];

            var num = 0;

            function jz() {
                oImg.src = arrImg[num];
                oTop.innerHTML = num + 1 + " / " + arrImg.length;
                oBottom.innerHTML = arrText[num];
            }

            jz();


            oLeft.onclick = function () {
                num--;
                if (num > -1) {
                    jz();
                } else {
                    num = i;
                    jz();
                }
            };
            oRight.onclick = function () {
                num++;
                if (num < 4) {
                    jz();
                } else {
                    num = m;
                    jz();
                }
            }


        }
    </script>
</head>
<body>
<div class="kzq">

    <a href="#" id="xh" class="active">循环</a>
    <a href="#" id="bxh">不循环</a>
    <p id="sm">当前状态为图片循环状态。</p>
</div>

<div class="content">

    <img id="img1" src="">

    <div id="top">数据计算中...</div>
    <div id="bottom">图片加载中...</div>

    <a href="#" id="left"><</a>
    <a href="#" id="right">></a>

</div>

</body>
</html>